<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>显示商品信息</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 20px;
        }

        h1 {
            text-align: center;
            color: #333;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
            background-color: #fff;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        table th, table td {
            padding: 10px;
            text-align: left;
            border: 1px solid #ddd;
        }

        table th {
            background-color: #f2f2f2;
            color: #333;
        }

        table tr:nth-child(even) {
            background-color: #f9f9f9;
        }

        table tr:hover {
            background-color: #f1f1f1;
        }

        .action-links {
            color: #007BFF;
            text-decoration: none;
        }

        .action-links:hover {
            text-decoration: underline;
        }

        .checkbox {
            margin-right: 10px;
        }

        input[type="submit"] {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            cursor: pointer;
            border-radius: 5px;
            margin-top: 10px;
            width: 100%;
        }

        input[type="submit"]:hover {
            background-color: #45a049;
        }

        .no-record {
            text-align: center;
            color: #888;
            font-size: 18px;
            padding: 20px;
        }

        .form-container {
            width: 80%;
            margin: 0 auto;
            background-color: #fff;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
        }

        .form-container input[type="checkbox"] {
            margin: 0;
        }

        .empty-table {
            text-align: center;
            font-size: 16px;
            color: #666;
        }

    </style>
    <script>
        // 全选/取消全选功能
        function toggleSelectAll(checkbox) {
            var checkboxes = document.getElementsByName('productid');
            for (var i = 0; i < checkboxes.length; i++) {
                checkboxes[i].checked = checkbox.checked;
            }
        }
    </script>
</head>
<body>

<div class="form-container">
    <h1>商品信息管理</h1>

    <!-- 添加批量删除表单 -->
    <form action="/shopadmin/ProductServlet" method="post" onsubmit="return confirm('确定要删除选中的商品吗？')">
        <input type="hidden" name="method" value="batchDelete">  <!-- 表示批量删除操作 -->
        <table>
            <thead>
            <tr>
                <td><input type="checkbox" onclick="toggleSelectAll(this)" class="checkbox"> 全选</td>
                <td>商品编号</td>
                <td>商品名称</td>
                <td>商品单价</td>
                <td>商品描述</td>
                <td>商品图片</td>
                <td>库存数量</td>
                <td>推荐商品</td>
                <td>操作</td>
            </tr>
            </thead>
            <tbody>
            <c:choose>
                <c:when test="${empty proList}">
                    <tr>
                        <td colspan="9" class="no-record">查无记录！！</td>
                    </tr>
                </c:when>
                <c:otherwise>
                    <c:forEach items="${proList}" var="p">
                        <tr>
                            <td><input type="checkbox" name="productid" value="${p.productId}" class="checkbox"></td>
                            <td>${p.productId}</td>
                            <td>${p.productName}</td>
                            <td>${p.productPrice}</td>
                            <td>${p.productDesc}</td>
                            <td><img src="${p.productImage}" alt="商品图片" width="100"></td>
                            <td>${p.quantity}</td>
                            <td>${p.recommend ? '是' : '否'}</td>
                            <td>
                                <a href="./ProductServlet?pid=${p.productId}&method=updateinput" class="action-links">修改</a> |
                                <a href="./ProductServlet?pid=${p.productId}&method=delete" class="action-links" onclick="return confirm('确定要删除该商品吗？')">删除</a>
                            </td>
                        </tr>
                    </c:forEach>
                </c:otherwise>
            </c:choose>
            </tbody>
        </table>

        <!-- 批量删除按钮 -->
        <input type="submit" value="批量删除">
    </form>

    <!-- 显示查无记录时的提示 -->
    <c:if test="${empty proList}">
        <p class="empty-table">暂无商品数据。</p>
    </c:if>

</div>

</body>
</html>
